<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字典类型</title>
    <script src="/js/vue.js"></script>
    <script src="/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-button type="primary" @click="openDialog()">添加</el-button>
    <el-button type="danger" @click="del()">批量删除</el-button>
    <el-table
            :data="types"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="code"
                label="类型编码"
                width="150">
        </el-table-column>
        <el-table-column
                prop="name"
                label="类型名称"
                width="120">
        </el-table-column>
        <el-table-column
                prop="description"
                label="类型描述"
                width="120">
        </el-table-column>
        <el-table-column
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="openDialog(scope.row)" type="text" size="small">修改</el-button>
                <el-button type="text" size="small" @click="del(scope.row.code)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

<!--添加和编辑的弹框-->
    <el-dialog title="字典类型" :visible.sync="dialogFormVisible">
        <el-form :model="type">
            <el-form-item label="类型编码" :label-width="formLabelWidth">
                <el-input v-model="type.code" autocomplete="off" :disabled="!isAdd"></el-input>
            </el-form-item>
            <el-form-item label="类型名称" :label-width="formLabelWidth">
                <el-input v-model="type.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="类型描述" :label-width="formLabelWidth">
                <el-input v-model="type.description" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveType">确 定</el-button>
        </div>
    </el-dialog>

</div>

<script>

    new Vue({
        el: "#app",
        data: {
            types:[],
            pageNum:undefined,
            pageSize:undefined,
            total:undefined,
            dialogFormVisible: false,
            formLabelWidth: '120px',
            type:{
                code:undefined,
                name:undefined,
                description:undefined
            },
            isAdd:true,//标记是添加还是修改
            multipleSelection:undefined  //被选中的行数据
        },
        methods: {
            del(code){//删除
                // console.log(code)
                let codes=[];
                if (code){//单个删除
                    codes.push(code)
                }else{//批量删除
                   this.multipleSelection.forEach(item=>{
                       codes.push(item.code)
                   })
                }

                if (codes.length==0){
                    this.$message({
                        message: '至少选中一项',
                        type: 'warning'
                    });
                    return;
                }


                this.$confirm('此操作将永久删除该数据件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {//点击确定
                    axios.delete(`/type?codes=${codes.join(",")}`).then(resp=>{
                        let data=resp.data;
                        if (data.code==200){
                            this.$message({
                                message: '操作成功',
                                type: 'success'
                            });
                            //刷新表格数据
                            this.initData()
                        }else{
                            this.$message({
                                message: data.msg,
                                type: 'error'
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });




            },
            handleSelectionChange(val) {//每一行的复选框的点击事件
                this.multipleSelection = val;
            },
            openDialog(item){//打开弹框
                this.dialogFormVisible=true;
                if (item){//修改
                    this.type={...item}
                    this.isAdd=false
                }else{//添加
                    this.type.code=undefined
                    this.type.name=undefined
                    this.type.description=undefined;
                    this.isAdd=true;
                }
            },
            saveType(){//点击保存按钮
                axios({
                    method: this.isAdd?"post":"put",
                    url:"/type",
                    data:this.type
                }).then(resp=>{
                    let data=resp.data;
                    if (data.code==200){
                        this.dialogFormVisible=false;
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        //刷新表格数据
                        this.initData();
                    }else{
                        this.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                })
            },
            initData(){//获取表格数据
                axios.get("/type",{params:{
                      pageNum:this.pageNum,
                      pageSize: this.pageSize
                    }}).then(resp=>{
                       let data=resp.data;
                       this.types=data.result;
                       this.total=data.count;
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.initData();//刷新表格数据
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum=val;
                this.initData();//刷新表格数据
            }
        },
        created(){
            this.initData();
        }
    })
</script>
</body>
</html>